import React, { useRef, useState, useEffect } from "react";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import styled from "styled-components";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { alertError } from "@utils/antd-helper";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";
const title = "Storage Cost Calculator";

const Main = ({ className }) => {
	const navigator = useNavigate();
	const [price, setPrice] = useState(0);
	const [sum, setSum] = useState(0);
	const [tab, setTab] = useState(0);
	const [count, setCount] = useState(0);
	const [unit, setUnit] = useState(0);
	const [days, setDays] = useState(0);

	const [placeholder1, setPlaceholder1] = useState();
	const [placeholder2, setPlaceholder2] = useState();

	document.title = title + "-CESS Scan";
	useEffect(() => {
		getPrice();
		onTabTurn(0);
	}, []);

	useEffect(() => {
		common.showAPIUrl();
	}, []);
	const getPrice = async () => {
		let price = await api.storage.price();
		setPrice(price);
	}
	const onSum = () => {
		let s = count;
		if (unit > 0) {
			s = s * 1000;
		}
		s = s * parseInt(days);
		if(tab==0&&days<30){
			return alertError('Least 30 days.');
		}
		setSum(s);
	}
	const onInput = (e, type) => {
		let v = e.target.value || 0;
		if (isNaN(v)) {
			v = 0;
		}
		v = parseFloat(v);
		console.log(v, type);
		if (type == 'count') {
			setCount(v);
		} else if (type == 'unit') {
			setUnit(v);
		} else {
			setDays(v);
		}
	}
	const onTabTurn = (i) => {
		setTab(i);
		let t = i == 0 ? "Storage Space" : i == 1 ? "Upgrade Storage Space" : "Owned Storage Space";
		setPlaceholder1(t);
		t = i == 0 ? "Days (least 30 days)" : i == 1 ? "Available Days" : "Extend Days";
		setPlaceholder2(t);
	}


	return (
		<div className={className}>
			<SearchBar background={"#f4f4f4"} height="100px" />
			<div className="content">
				<div className="list">
					<div>
						<div className="o-title">
							<img style={{ width: 7, height: 12, cursor: "pointer" }} src={process.env.PUBLIC_URL + "/img/goback.svg"} onClick={() => navigator('/storage')} />
							{title}
						</div>
						<div className="calculator">
							<div className="tab">
								<div className="tab-bg" style={{ marginLeft: tab * 33.333 + '%' }}></div>
								<div className="tab-btn">
									<span className={tab == 0 ? "curr" : "uncurr"} onClick={() => onTabTurn(0)}>Purchase</span>
									<span className={tab == 1 ? "curr" : "uncurr"} onClick={() => onTabTurn(1)}>Extend Space</span>
									<span className={tab == 2 ? "curr" : "uncurr"} onClick={() => onTabTurn(2)}>Extend Duration</span>
								</div>
							</div>
							<div className="price">Estimated {price} CESS / GB / Month</div>
							<div className="input">
								<input type="text" placeholder={placeholder1} onChange={(e) => onInput(e, 'count')}></input>
								<select onChange={(e) => onInput(e, 'unit')}><option value={0}>GB</option><option value={1}>TB</option></select>
							</div>
							<div className="input" style={{ marginTop: 20 }}>
								<input type="text" placeholder={placeholder2} onChange={(e) => onInput(e, 'days')}></input>
							</div>
							<div className="btn-line"><span onClick={onSum}>Calculate</span></div>
							<div className="sum">
								<div className="total">Total</div>
								<div className="balance-box">
									<img className="balance-logo" style={{ width: 24, height: 24 }} src="/img/cess.png" />
									<span className="money" style={{ fontSize: 30, fontWeight: "bold" }}>{sum}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<Footer />
		</div>
	);
};

export default React.memo(styled(Main)`
	display: block;
	overflow: hidden;
	.calculator{
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 600px;
		font-size: 14px;
		margin-top:30px;
		.tab{
			width:80%;
			max-width: 400px;
			position: relative;
			top:0;		
			border:1px solid #000;
			border-radius: 5px;
			padding:5px;
			.tab-bg{				
				width:33.33%;
				border-radius: 5px;
				height:26px;
				display: block;
				overflow: hidden;
				background-color: #000;
				transition: all 0.3s;
			}
			.tab-btn{
				position: absolute;
				top:5px;
				left:5px;
				display: flex;
				flex-direction: row;
				width:calc(100% - 10px);
				span{
					width:33.333%;					
					height:26px;
					line-height: 26px;
					display: block;
					overflow: hidden;
					text-align: center;
					transition: all 0.6s;
				}
				.uncurr{
					color:#000;
					cursor: pointer;
				}
				.curr{
					color:#fff;
					cursor: not-allowed;
				}
			}
		}
		.price{
			margin:30px 0 10px;
			display: block;
			clear: both;
			overflow: hidden;
		}
		.input{
			width: 99%;
			height:60px;
			line-height: 60px;
			display: flex;
			flex-direction: row;
			border-radius: 5px;
			border:1px solid #000;
			input{
				width:70%;
				height:60px;
				line-height: 60px;
				background-color: transparent;
				outline: none;
				margin:0;
				padding:0;
				border:none;
				text-indent: 10px;
			}
			select{
				width:28%;
				background-color: transparent;
				outline: none;
				margin:0;
				padding:0;
				border:none;
				text-align: center;
				border-left:1px solid #000;
			}
		}
		.btn-line{
			margin:50px 0 30px;
			display: block;
			clear: both;
			overflow: hidden;
			span{
				width: 155px;
				height: 47px;
				line-height: 47px;
				padding: 2px 2px 2px 2px;
				border-radius: 4px;
				background-color: #000000;
				color: #ffffff;
				text-align: center;
				display: block;
				overflow: hidden;
				cursor: pointer;
			}
			span:hover{
				background-color: #444;
			}
		}
		.sum{
			display: block;
			margin:10px 0 100px;
			overflow: hidden;
			clear: both;
			.total{
				line-height: 40px;
			}
		}
	}
`);
